<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Button</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="/admin/demo/demo.css" rel="stylesheet" type="text/css" />

    <script src="/admin/scripts/boot.js" type="text/javascript"></script>

    <style type="text/css">
        /*body .mini-button .mini-button-text
        {
            padding-top:3px;
            padding-bottom:1px;
        }*/
    </style>

</head>
<body>
<h1>Button 按钮 </h1>
<p class="tip"></p>

<h4>Only Text</h4>
<a class="mini-button" onclick="onClick" enabled="false" >增加</a>
<a class="mini-button" onclick="onClick" >修改</a>

<h4>Text and Icon</h4>
<a class="mini-button" iconCls="icon-add" onclick="onClick">增加</a>
<a class="mini-button mini-button-iconRight" iconCls="icon-edit" onclick="onClick" >修改</a>

<h4>Text and Img</h4>

<h4>Only Icon</h4>
<a class="mini-button " iconCls="icon-add" onclick="onClick" tooltip="增加"></a>
<a class="mini-button" iconCls="icon-edit" onclick="onClick" tooltip="编辑"></a>

<h4>Plain</h4>
<a class="mini-button " plain="true" iconCls="icon-add" onclick="onClick">增加</a>
<a class="mini-button" plain="true" iconCls="icon-edit" onclick="onClick">修改</a>
<a class="mini-button" plain="true" iconCls="icon-remove" onclick="onClick">删除</a>

<h4>Icon Position</h4>
<a class="mini-button mini-button-iconTop" iconCls="icon-add" onclick="onClick" >增加</a>
<a class="mini-button mini-button-iconTop" iconCls="icon-edit" onclick="onClick" >修改</a>

<h4>A Link</h4>
<a class="mini-button" href="http://www.google.com" target="_blank">Google</a>
<a class="mini-button" href="http://www.baidu.com">Baidu</a>

<script type="text/javascript">
    mini.parse();
    function onClick(e) {
        var button = e.sender;
        var iconCls = button.getIconCls();
        var text = button.getText();
        if (iconCls) {
            alert("text: " + text + "\nicon: " + iconCls);
        } else {
            alert(text);
        }
    }

</script>

<div class="description">
    <h3>Description</h3>
    <p>MiniUI Button能设置文本(text)、图标(iconCls)、超连接地址(href)、透明背景(plain)等外观。</p>
</div>
</body>
</html>